<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="(ws,index) in list">
            <span>{{ws.name}}</span>
            <input type="text" id="text" v-model="ws.content">
            <button id="btn" type="button" @click="speekOut(index)">发言</button>
            <button id="btn" type="button" @click="descption(index)">描述</button>
            <button id="btn" type="button" @click="quickMatch(index)">快速匹配</button>
            <button id="btn" type="button" @click="sendready(index)">准备</button>
            <button id="btn" type="button" @click="exitRoom(index)">退出房间</button>
        </div>
        <button id="btn" type="button" @click="allMatch()">全部进房</button>
        <button id="btn" type="button" @click="allReady()">全部准备</button>
        <button id="btn" type="button" @click="vote1()">模拟投票第1轮</button>
        <button id="btn" type="button" @click="vote2()">模拟投票第2轮</button>

        <div v-for="(item,index) in roomlist">
            <span class="rid">房间号：{{item.rid}}</span>
            <span class="rid" v-if="item.user_info && item.user_info.nickname">房主名字：{{item.user_info.nickname}}</span>
            <span class="rid" v-if="item.user_info && item.user_info.uid">房主uid：{{item.user_info.uid}}</span>
            <span class="rid">房主状态：{{item.room_player_list[0].ready==1?"已准备":"未准备"}}</span>
            <button id="btn" type="button" @click="kickOut(index)">踢出房间</button>

        </div>
    </div>
    <script>

        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                wsList: [],
                roomlist: [],
                list: [{
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ2",
                    content: "",
                    name: "放德行"
                }, {
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ3",
                    content: "",
                    name: "王者风范"
                }, {
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ4",
                    content: "",
                    name: "内裤外穿"
                }, {
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ5",
                    content: "",
                    name: "御姐无敌"
                }, {
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ6",
                    content: "",
                    name: "内衣狂人"
                }, {
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ7",
                    content: "",
                    name: "自己人"
                }, {
                    uid: "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ8",
                    content: "",
                    name: "天地一号"
                }]

            }, methods: {
                kickOut(index) {
                    this.wsList[index].send(JSON.stringify({
                        "header": { "command_id": 2019, "uid": this.list[index].uid, "packet_id": 15 }, "body": JSON.stringify({
                            kick_uid: this.roomlist[index].owner,
                            rid: this.roomlist[index].rid
                        })
                    }))
                },
                descption(index) {
                    //{"header":{"command_id":1014,"uid":"oUQBH4xqaptrqlSc-9CaSyK15ZiE","packet_id":51},"body":"{\"type\":3,\"desc\":\"声音吧\"}"}
                    this.wsList[index].send(JSON.stringify({
                        "header": { "command_id": 1014, "uid": this.list[index].uid, "packet_id": 15 }, "body": JSON.stringify({
                            type: 3,
                            desc: this.list[index].content
                        })
                    }))
                },
                speekOut(index) {
                    //{"header":{"command_id":1007,"uid":"oUQBH4xqaptrqlSc-9CaSyK15ZiE","packet_id":6},"body":"{\"content\":\"撒啊啊发\"}"}
                    this.wsList[index].send(JSON.stringify({
                        "header": { "command_id": 1007, "uid": this.list[index].uid, "packet_id": 15 }, "body": JSON.stringify({
                            content: this.list[index].content
                        })
                    }))
                },
                exitRoom(index) {
                    //{"header":{"command_id":1005,"uid":"oUQBH4xqaptrqlSc-9CaSyK15ZiE","packet_id":17},"body":"{}"}
                    this.wsList[index].send(JSON.stringify({ "header": { "command_id": 1005, "uid": this.list[index].uid, "packet_id": 15 }, "body": "{}" }))
                },
                quickMatch(index) {

                    this.wsList[index].send(JSON.stringify({ "header": { "command_id": 1001, "uid": this.list[index].uid, "packet_id": 15 }, "body": "{\"game_type\":1}" }))
                    this.wsList[index].send(JSON.stringify({ "header": { "command_id": 1017, "uid": this.list[index].uid, "packet_id": 16 }, "body": "{\"state\":0}" }))

                },

                sendready(index) {
                    //{"header":{"command_id":1006,"uid":"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ","packet_id":69},"body":"{}"}
                    this.wsList[index].send(JSON.stringify({ "header": { "command_id": 1006, "uid": this.list[index].uid, "packet_id": 69 }, "body": "{}" }))

                },
                allReady() {
                    this.wsList.forEach((ws, index) => {
                        ws.send(JSON.stringify({ "header": { "command_id": 1006, "uid": this.list[index].uid, "packet_id": 69 }, "body": "{}" }))
                    })
                }, allMatch() {
                    this.wsList.forEach((ws, index) => {
                        ws.send(JSON.stringify({ "header": { "command_id": 1001, "uid": this.list[index].uid, "packet_id": 15 }, "body": "{\"game_type\":1}" }))
                        ws.send(JSON.stringify({ "header": { "command_id": 1017, "uid": this.list[index].uid, "packet_id": 16 }, "body": "{\"state\":0}" }))
                    })
                }, vote1() {
                    this.wsList.forEach((item, index) => {
                        item.send(JSON.stringify({
                            "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ" + (index + 2), "packet_id": 15 },
                            "body": JSON.stringify({ "type": 1, "vote_uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ" + (index + 3) })
                        }))
                    })
                    this.wsList[6].send(JSON.stringify({
                        "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ8", "packet_id": 15 },
                        "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ\"}"
                    }))



                }

                , vote2() {

                    this.wsList[2].send(JSON.stringify({
                        "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ3", "packet_id": 15 },
                        "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ6\"}"
                    }))
                    this.wsList[1].send(JSON.stringify({
                        "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ2", "packet_id": 15 },
                        "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ6\"}"
                    }))

                    this.wsList[3].send(JSON.stringify({
                        "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ4", "packet_id": 15 },
                        "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ3\"}"
                    }))
                    this.wsList[5].send(JSON.stringify({
                        "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ6", "packet_id": 15 },
                        "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ3\"}"
                    }))

                    this.wsList[4].send(JSON.stringify({
                        "header": { "command_id": 1012, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ5", "packet_id": 15 },
                        "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ\"}"
                    }))

                },
                requestUserInfo(uid_list, rlist) {

                    //1.创建ajax对象(此处兼容性的创建)
                    var xhr = null;
                    try {
                        xhr = new XMLHttpRequest();
                    } catch (e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    //2.调用open方法（true----异步）
                    // xhr.open("post", "http://192.168.0.102:9999/api/online/multi_get_user_info.php", true);
                    xhr.open("post", "https://www.bigmantech.cn/api/online/multi_get_user_info.php", true);
                    //3.发送数据
                    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                    xhr.send("uid_list=" + uid_list);
                    //4.请求状态改变事件
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                let json = JSON.parse(xhr.responseText)
                                let entries = json.data.entries
                                entries.forEach(entry=>{
                                    rlist.forEach(item=>{
                                         if(item.owner==entry.user_info.uid){
                                             item.user_info=entry.user_info
                                         }
                                     })
                                })
                                // rlist[index].user_info = user_info

                                this.roomlist = rlist
                                console.log("[新列表]", this.roomlist)
                            } else {
                                alert("错误" + xhr.status)
                            }
                        }
                    }
                }



            },

            created() {
                this.$nextTick(() => {
                    let count = 0
                    this.list.forEach(ws => {
                        // var ws = new WebSocket('ws:192.168.0.104:2555')
                        var ws = new WebSocket('wss://www.bigmantech.cn/onlinegame')
                        ws.onopen = (e) => {
                            console.log(e)
                            this.wsList.push(ws)

                            ws.send(JSON.stringify({
                                "header": { "command_id": 2017, "uid": "oUQBH4xgnbvBBdUPGxwrgXJYFMKQ6", "packet_id": 15 },
                                "body": "{\"type\":1,\"vote_uid\":\"oUQBH4xgnbvBBdUPGxwrgXJYFMKQ3\"}"
                            }))
                        }

                        ws.onmessage = (e) => {
                            count++
                            let json = JSON.parse(e.data)

                            if (json.header.command_id == 2018) {
                                let roomlist = JSON.parse(json.body).room_list
                                console.log(roomlist)
                                roomlist = roomlist.filter(item => {
                                    return item.state == 1
                                })

                              
                                if (count == this.list.length) {
                                    let uid_list
                                    roomlist.forEach((item, index) => {
                                          if(index==0){
                                              uid_list=item.owner
                                          }else{
                                            uid_list+=","+item.owner
                                          }
                                    })
                                    this.requestUserInfo(uid_list,  roomlist)
                                }
                            }

                        }
                    })
                });
            },

            mounted() {




            },
        })


    </script>

</body>

</html>